<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three test3-3 程序性能</title>
    <script src="js/three.js"></script>
    <script src="js/Stats.js"></script>
    <style>
        #container{
            border:1px dashed blue;
            width:90%;
            height:500px;
            margin:0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body onload="threeStart()">
<div id="container"></div>
</body>
<script>
    //渲染器
    var renderer;
    var stats;
    function initThree(){
        width=document.getElementById('container').clientWidth;
        height=document.getElementById('container').clientHeight;
        renderer=new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('container').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF,1.0);


        //性能测试
        stats=new Stats();
        stats.setMode(1);//0:fps fps表示上一秒的帧数，这个值越大越好，一般为60左右。    1：ms MS表示渲染一帧需要的毫秒数，这个数字是越小越好。
        stats.domElement.style.position='absolute';
        stats.domElement.style.left='0px';
        stats.domElement.style.top='0px';
        document.body.appendChild(stats.domElement);
    }
    //摄像机
    var camera;
    function initCamera(){
        camera=new THREE.PerspectiveCamera(45,width/height,1,10000);
        camera.position.x=0;
        camera.position.y=0;
        camera.position.z=600;
        camera.up.x=0;
        camera.up.y=1;
        camera.up.z=0;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }
    //场景
    var scene;
    function initScene(){
        scene=new THREE.Scene();
    }
    //灯光
    var light;
    function initLight(){
        light=new THREE.AmbientLight(0xFF0000);//环境光
        light.position.set(100,100,200);
        scene.add(light);
        light=new THREE.PointLight(0x00FF00); //点光源
        light.position.set(0,0,300);
        scene.add(light);
    }
    //设置物体
    var cube;
    var mesh;
    function initObject(){
        var geometry=new THREE.CylinderGeometry(100,150,400);// 圆柱体
        var material=new THREE.MeshLambertMaterial({color:0xFFFF00});
        mesh=new THREE.Mesh(geometry,material);
        mesh.position=new THREE.Vector3(0,0,0);
        scene.add(mesh);
    }

    function threeStart(){
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        animation();
    }

    //  循环渲染
    function animation(){
        camera.position.x+=1;//相机位置向右移动   即物体向左移动
//        mesh.position.x-=1; //与上句代码实现的效果一样  不同的是本代码的是让物体自身向左移动，而上句则是让摄像机向右移动
        renderer.render(scene,camera);//函数的作用是重新绘制渲染结果
        requestAnimationFrame(animation); //在下一个动画帧触发animation函数   所以会不断循环animation函数  视觉效果物体会一直在移动
        stats.update();
    }

</script>
</html>